<template>
	<md-card style="margin:8px 0;">
		<md-card-header md-alignment="space-between" style="display:flex;">
			<span
				class="md-title md-title-text"
				:title="areaName+getLangText(label.areaStyle)"
			>{{areaName}}{{getLangText(label.areaStyle)}}</span>
			<span style="flex:1;text-align:right;">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button :class="['md-icon-button',isShow?'md-primary':'']" @click="sendStyle">
					<i :class="['iconfont', isShow?'iconsave':'iconshezhi2']"></i>
				</md-button>
			</span>
		</md-card-header>
		<md-card-content v-if="isShow">
			<div v-if="(typeof areaStyle.color=='string')">
				<div class="table-row-item">
					<span>{{getLangText(label.color)}}:</span>
					<span>
						<span
							class="color-span"
							:style="{background:areaStyle.color}"
							@click="showColorPicker('color')"
						></span>
						{{areaStyle.color}}
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="areaStyle.color"
					@color-result="onColorPicker"
					:show-picker="picker.show&&picker.current=='color'"
				></color-picker>
			</div>

			<div v-if="(areaStyle.color instanceof Array)">
				<div class="table-row-item">
					<span>{{getLangText(label.color)}}:</span>
					<span>
						<md-button class="md-icon-button" @click="addColorPicker">
							<i class="iconfont iconadd"></i>
						</md-button>
					</span>
				</div>

				<div class="table-row-item" v-for="(item,idx) in areaStyle.color" :key="idx">
					<span></span>
					<span>
						<span
							class="color-span"
							:style="{background:areaStyle.color[idx]}"
							@click="showColorPicker1(item,idx)"
						></span>
						{{areaStyle.color[idx]}}
						<md-button class="md-icon-button" @click="delColorPicker(idx)">
							<i class="iconfont iconshanchu"></i>
						</md-button>
					</span>
				</div>

				<color-picker
					:lang-type="langType"
					:rgba="picker.result"
					@color-result="onColorPicker1"
					:show-picker="picker.show&&picker.current=='color'"
				></color-picker>
			</div>

			<md-field>
				<label>{{getLangText(label.opacity)}}</label>
				<md-input v-model="areaStyle.opacity"></md-input>
			</md-field>

			<md-field>
				<label>{{getLangText(label.shadowBlur)}}</label>
				<md-input v-model.number="areaStyle.shadowBlur"></md-input>
			</md-field>

			<div class="table-row-item">
				<span>{{getLangText(label.shadowColor)}}:</span>
				<span>
					<span
						class="color-span"
						:style="{background:areaStyle.shadowColor}"
						@click="showColorPicker('shadowColor')"
					></span>
					{{areaStyle.shadowColor}}
				</span>
			</div>

			<color-picker
				:lang-type="langType"
				:rgba="areaStyle.shadowColor"
				@color-result="onColorPicker"
				:show-picker="picker.show&&picker.current=='shadowColor'"
			></color-picker>

			<md-field>
				<label>{{getLangText(label.shadowOffsetX)}}</label>
				<md-input v-model.number="areaStyle.shadowOffsetX"></md-input>
			</md-field>
			<md-field>
				<label>{{getLangText(label.shadowOffsetY)}}</label>
				<md-input v-model.number="areaStyle.shadowOffsetY"></md-input>
			</md-field>
		</md-card-content>
	</md-card>
</template>
<script>
	import ColorPicker from "@/components/comp/ColorPicker";
	export default {
		name: "AreaStyle",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			areaName: {
				type: String,
				default: ""
			},
			option: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		components: {
			"color-picker": ColorPicker
		},
		data: () => ({
			label: {
				areaStyle: { zh: "区域样式", en: "AreaStyle" },
				color: { zh: "区域颜色", en: "color" },
				opacity: { zh: "区域透明度", en: "opacity" },
				width: { zh: "区域宽", en: "width" },
				shadowBlur: { zh: "阴影模糊大小", en: "shadowBlur" },
				shadowColor: { zh: "阴影颜色", en: "shadowColor" },
				shadowOffsetX: { zh: "阴影水平偏移", en: "shadowOffsetX" },
				shadowOffsetY: { zh: "阴影垂直偏移", en: "shadowOffsetY" }
			},
			isShow: false,
			areaStyle: {
				color: "#FFF",
				shadowBlur: "",
				shadowColor: "",
				shadowOffsetX: 0,
				shadowOffsetY: 0,
				opacity: 1
			},
			picker: {
				show: false,
				current: "",
				result: "",
				idx: 0
			},
			originOption:'',
			isParse:false
		}),
		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();
				} else {
					this.picker.show = false;
				}
			},
			areaStyle: {
				handler(val, oldVal) {
					if (this.isShow&&!this.isParse) {
						this.$emit("area-style-result", JSON.parse(JSON.stringify(this.areaStyle)));
					}
				},
				deep: true // 监听这个对象中的每一个属性变化
			}
		},
		methods: {
			showColorPicker1(item, idx) {
				if (this.picker.idx != idx || !this.picker.show) {
					this.picker.current = "color";
					if (this.lineType == 2) {
						this.picker.result = item[1];
					} else {
						this.picker.result = item;
					}

					this.picker.idx = idx;
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			onColorPicker1(op) {
				if (this.lineType == 2) {
					this.areaStyle.color[this.picker.idx][1] = op.rgba;
				} else {
					this.areaStyle.color[this.picker.idx] = op.rgba;
				}
			},
			addColorPicker() {
				if (this.lineType == 2) {
					this.areaStyle.color.push([1, "#FFF"]);
				} else {
					this.areaStyle.color.push("#FFF");
				}
			},
			delColorPicker(idx) {
				this.areaStyle.color.splice(idx, 1);
			},
			showColorPicker(tag) {
				if (tag != this.picker.current || !this.picker.show) {
					this.picker.current = tag;
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			onColorPicker(op) {
				if (this.picker.current) this.areaStyle[this.picker.current] = op.rgba;
			},
			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
					this.$emit("area-style-result", JSON.parse(JSON.stringify(this.areaStyle)));
				}
			},

			parseObj() {
				if(!this.option||JSON.stringify(this.option)=='{}')return;
				this.isParse=true;
				for (var key in this.option) {
					this.areaStyle[key] = this.option[key];
				}
				this.originOption=JSON.stringify(this.areaStyle);
				var that=this;
				setTimeout(() => {
					that.isParse=false;
				}, 100);
			},
			colseOption() {
				this.isShow = false;
				if (this.originOption!=JSON.stringify(this.areaStyle)) {					
					this.$emit("area-style-result", JSON.parse(JSON.stringify(this.areaStyle)));
				}
			},
			listenEvent() {
				this.app.$on("close-option", this.colseOption);
			},
			offEvent() {
				this.app.$off("close-option", this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
		},
		beforeDestroy() {
			this.offEvent();
		}
	};
</script>
